<template>
	<view class="pages">
		<view class="bottom-tabbar">
			<tabbar :currentPage="3" />
		</view>
		<view class="tabs">
			<u-tabs :list="list1" @click="click" lineWidth="30" lineColor="#f56c6c" keyName="name" :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }" :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)',
        }" itemStyle="padding:0 40rpx; height: 34px;"></u-tabs>
		</view>
		<view class="contens">
			<message-list v-if="currentContent === 0"></message-list>
			<view class="content1" v-if="currentContent === 1">
				<view class="content" v-for="item,index in list" :key="index" @click="go('/pages/square/detail?id='+item.dynamic_id)">
					<view class="yq">
						<view class="lef">
							<view class="img">
								<image :src="rq.imgUrl(item.send_user_avatar)" mode="scaleToFill" />
							</view>
							<view class="info">
								<p>{{item.send_user_nickname}}</p>
								<view class="conts">{{item.comment_id===0?'评论了你的广场动态':'回复了你的评论'}}
									<p>{{item.createtime}}</p>
								</view>
							</view>
						</view>
						<view class="rig">
							<image v-if="item.dynamic_image" :src="rq.imgUrl(item.dynamic_image.split(',')[0])"
								mode="scaleToFill" />
						</view>
					</view>
					<view class="bots" v-if="item.comment_id&&item.comment_content==''">
						<view class="bot">
							<p>该评论已删除</p>
						</view>
					</view>
					<view class="bots" v-else>
						<view class="bot">
							<p>
								{{item.content}}
							</p>
							<view class="nr" v-if="item.comment_content">
								<text>{{item.to_user_nickname}}：</text>{{item.comment_content}}
							</view>
						</view>
						<view class="update" @click.stop="handleComment(item,index)">
							<image src="https://pw.qyang.cc/static/talk.png" mode="scaleToFill" />
							<text>回复</text>
						</view>						
					</view>
					<view class="input_box" @click.stop="()=>{return false}" v-if="item.showInput">
						<input type="text" @confirm.stop="send" confirm-type="send" placeholder="请输入回复内容" ref="input" :adjust-position="false" v-model="value">
						<view class="send" @click.stop="send">发送</view>
					</view>
				</view>				
			</view>
			<view class="content2" v-if="currentContent === 2">
				<view class="content" v-for="item,index in list" :key="index">
					<view class="lef">
						<view class="img">
							<image src="https://pw.qyang.cc/static/dang.png" mode="scaleToFill" />
						</view>
						<view class="info">
							<view class="info_title">{{item.title}}  <view class="rig">{{item.createtime}}</view></view>
							<view class="conts">{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>		
	</view>
</template>

<script>
	import messageList from '@/components/messageList/messageList.vue';
	export default {
		components: {
			messageList
		},
		data() {
			return {
				list1: [{
						name: "私信",
					},
					{
						name: "互动消息",
					},
					{
						name: "官方消息",
					},
				],
				currentContent: 1, // 新增，用于控制显示的内容索引，初始为0对应content0
				params: {
					page: 1
				},
				list: [],
				total: 0,
				value:''
			};
		},
		onShow() {			
			this.click(this.list1[0])
		},
		methods: {
			click(item) {
				if (item.name === "私信") {
					this.currentContent = 0;
				} else if (item.name === "互动消息") {
					this.list=[]
					this.currentContent = 1;
					this.params.page = 1
					this.params.type = 2
					this.getList()
				} else if (item.name === "官方消息") {
					this.list=[]
					this.currentContent = 2;
					this.params.page = 1
					this.params.type = 3
					this.getList()
				}
			},
			getList(more) {
				this.rq.getData('dynamic/notice', this.params).then(res => {
					this.total = res.data.total
					this.list = more ? [...this.list, res.data.data] : res.data.data
				})
			},
			handleComment(item,index){
				this.currentItem = item
				this.currentItem.showInput = true
				this.currentItem.index = index
				this.$set(this.list,index,this.currentItem)
			},
			send(){
				let params = {
							pid:this.currentItem.pid,
							on_pid:this.currentItem.on_pid,
							dynamic_id:this.currentItem.dynamic_id,
							content:this.value,
							on_user_id:this.currentItem.send_user_id
						}
				this.rq.getData('dynamic/comment',params).then(res=>{
					if(res.code == 1){
						this.currentItem.showInput = false
						this.$set(this.list,this.currentItem.index,this.currentItem)
						this.params.page = 1
						this.getList()
					}
				})
				
			},
			go(url){
				uni.navigateTo({
					url:url
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.bottom-tabbar {
		position: fixed;
		bottom: 0;
		z-index: 1;
	}
	.input_box{
		margin-top: 20rpx;
		margin-left: 100rpx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 0;
		.send{
			width: 100rpx;
			border-radius: 20rpx;
			padding: 5rpx;
			font-size: 28rpx;
			border: 1rpx solid #333;
			text-align: center;
			color: #333;
			margin-left: 10rpx;
		}
		input{
			flex: 1;
			background: #f7f7f7;
		}
	}
	.tabs::v-deep view.data-v-48634e29,
	.tabs::v-deep scroll-view.data-v-48634e29,
	.tabs::v-deep swiper-item.data-v-48634e29 {
		flex-grow: 1 !important;
	}

	.pages {
		background: #f7f7f7;
		padding-bottom: 120rpx;
		.tabs{
			background: #fff;
		}
		.contens {
			.content0 {
				.content {
					display: flex;
					justify-content: space-between;
					background: #ffffff;
					padding: 20rpx 30rpx;
					margin: 20rpx;
					border-radius: 25rpx;

					.lef {
						display: flex;
						align-items: center;

						.img {
							image {
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
								margin-right: 20rpx;
							}
						}

						.info {
							.conts {
								//超过宽度用...显示
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								width: 400rpx;
								font-size: 26rpx;
								color: #999999;
								margin-top: 10rpx;
							}
						}
					}

					.rig {
						font-size: 26rpx;
						color: #999999;
					}
				}
			}

			.content1 {
				.content {
					background: #ffffff;
					padding: 20rpx 30rpx;
					margin: 20rpx;
					border-radius: 25rpx;

					.yq {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.lef {
							display: flex;
							align-items: center;

							.img {
								image {
									width: 80rpx;
									height: 80rpx;
									border-radius: 50%;
									margin-right: 20rpx;
								}
							}

							.info {
								.conts {
									display: flex;
									//超过宽度用...显示
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									width: 400rpx;
									font-size: 26rpx;
									color: #999999;
									margin-top: 10rpx;

									p {
										margin-left: 20rpx;
									}
								}
							}
						}

						.rig {
							image {
								width: 70rpx;
								height: 70rpx;
							}
						}
					}
				}

				.bots {
					margin: 20rpx 30rpx 20rpx 100rpx;

					.bot {
						margin-bottom: 20rpx;

						p {
							font-size: 26rpx;
							color: #555555;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: normal;
						}

						title {
							font-size: 26rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: normal;
						}

						.nr {
							font-size: 26rpx;
							color: #555555;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: normal;
							margin-top: 10rpx;

							text {
								border-left: 1rpx solid #999999;
								padding-left: 10rpx;
							}
						}
					}

					.update {
						display: flex;
						align-items: center;
						width: 120rpx;
						height: 50rpx;
						line-height: 50rpx;
						justify-content: center;
						background: #eeeeee;
						border-radius: 25rpx;

						image {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}

						text {
							font-size: 26rpx;
							color: #555555;
						}
					}
				}
			}

			.content2 {
				.content {
					display: flex;
					justify-content: space-between;
					background: #ffffff;
					padding: 20rpx 30rpx;
					margin: 20rpx;
					border-radius: 25rpx;

					.lef {
						display: flex;
						align-items: center;
						flex: 1;
						.img {
							width: 80rpx;
							height: 80rpx;
							background: #ffeeef;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 20rpx;

							image {
								width: 40rpx;
								height: 40rpx;
							}
						}

						.info {
							flex: 1;
							.info_title{
								display: flex;
								align-items: center;
								justify-content: space-between;
							}
							.conts {
								//超过宽度自动换行
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: normal;
								display: -webkit-box;
								// width: 480rpx;
								font-size: 26rpx;
								color: #999999;
								margin-top: 10rpx;
							}
						}
					}

					.rig {
						font-size: 26rpx;
						color: #999999;
					}
				}
			}
		}
	}
</style>